<!DOCTYPE html>
<html>

<head>
    <!-- 1. 行内块元素的间距问题 -->
    <!-- 两个item之间有间距，item下方也有间距 -->
    <meta charset="utf-8">
    <title>1. 行内块元素的间距问题</title>
    <style>
        .box {
            border: 1px solid red;

        }

        .item{
            width: 200px;
            height: 200px;
            background-color: palegreen;
            display: inline-block;
        }

        span{
            background-color: peru;
        }

    </style>
</head>

<body>
    <div class="box">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>

    </div>

    <p>横向的间距是因为源码中存在空格，间距大小就是一个空格的宽度，跟box的font-size有关</p>
    <p>纵向的间距是因为行内元素的vertical-align默认是基线对齐，即item元素底部会和box元素的基线对齐，box的基线位置取决于font-size</p>

</body>

</html>
